<template>
    <div style="margin-top: 20px">
        <el-form inline :model="searchForm">
            <% columnList.forEach(function (item) { %>
                <el-form-item prop="<%= item.field %>" label="<%= item.comment %>">
                    <el-input v-model="searchForm.<%= item.field %>" aria-placeholder="请输入<%= item.comment %>"/>
                </el-form-item>
            <% }) %>
            <el-form-item>
                <search-buttons
                        :fetch-data="fetchList"
                        :export-flag="false"
                        :add-fun="addMaterial"
                />
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" width="100" label="序号"/>
            <% columnList.forEach(function (item) { %>
                <el-table-column prop="<%= item.field %>" label="<%= item.comment %>"/>
            <% }) %>

            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-button type="text" @click="editItem(scope.row.id)">编辑</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="text" @click="itemDetail(scope.row.id)">详情</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="text" @click="delItem(scope.row.id)">删除</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
                :page.sync="page.current"
                :total="total"
                :limit.sync="page.size"
                @pagination="fetchList"
        />
    </div>
</template>
<script>
    /**
     * SearchButtons: 搜索按钮组件
     * Pagination: 分页组件
     * changePage：分页切换方法
     * popAutoHeightDialog：弹窗组件 移步下方链接查看
     *  https://gitee.com/chargeduck/lesscoding_admin_ui/blob/charge_duck_permission/src/
     */
    import SearchButtons from '@/components/SearchButtons/index.vue'
    import Pagination from '@/components/Pagination/index.vue'
    import {del<%= table.className %>ById, <%= table.firstLowerClassName %>List} from '@/api/<%= table.firstLowerClassName %>'
    import {changePage} from '@/utils/tablePage'
    import {popAutoHeightDialog} from '@/utils/popDialog'

    export default {
        name: '<%= table.className %>Index',
        components: {SearchButtons, Pagination},
        data() {
            return {
                searchForm: {},
                page: {
                    current: 1,
                    size: 10
                },
                total: 0,
                tableData: []
            }
        },
        created() {
            this.fetchList()
        },
        methods: {
            fetchList() {
                <%= table.firstLowerClassName %>List({...this.searchForm, page: this.page}).then(resp => {
                    changePage(this, resp)
                })
            },
            addMaterial() {
                this.popDialogForm({
                    title: '新增<%= table.tableComment %>',
                    type: 0
                })
            },
            editItem(id) {
                this.popDialogForm({
                    title: '编辑<%= table.tableComment %>',
                    type: 1,
                    id
                })
            },
            itemDetail(id) {
                this.popDialogForm({
                    title: '<%= table.tableComment %>详情',
                    type: 2,
                    id
                })
            },
            delItem(id) {
                del<%= table.className %>ById(id).then(resp => {
                    this.$message.success(resp.message)
                    this.fetchList()
                })
            },
            popDialogForm(params) {
                popAutoHeightDialog('views/<%= table.firstLowerClassName %>/form', '600px',
                    this.fetchList, params)
            }
        }
    }
</script>
<style></style>
